<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="sidebar">
    <!-- 系统Logo -->
    <div class="sidebar-logo">
      <span class="logo-text">派单系统</span>
    </div>

    <!-- 导航菜单 -->
    <ul class="sidebar-menu">
      <!-- 首页 -->
      <li class="menu-item">
        <router-link
          to="/"
          class="menu-link"
          :class="{ active: $route.path === '/' }"
        >
          <i class="icon-home">🏠</i>
          <span class="menu-text">首页</span>
        </router-link>
      </li>

      <!-- 工单管理（下拉菜单） -->
      <li class="menu-group">
        <div class="menu-group-title" @click="toggleMenu('workOrder')">
          <i class="icon-order">📋</i>
          <span>工单管理</span>
          <i class="icon-arrow" :class="{ rotate: openMenus.workOrder }">▼</i>
        </div>
        <ul class="submenu" v-show="openMenus.workOrder">
          <li>
            <router-link
              to="/work-order/list"
              :class="{ active: $route.path.includes('/work-order/list') }"
            >
              工单列表
            </router-link>
          </li>
          <li>
            <router-link
              to="/work-order/dispatch"
              :class="{ active: $route.path === '/work-order/dispatch' }"
            >
              工单派单
            </router-link>
          </li>
        </ul>
      </li>

      <!-- 客户管理 -->
      <li class="menu-group">
        <div class="menu-group-title" @click="toggleMenu('customer')">
          <i class="icon-customer">👥</i>
          <span>客户管理</span>
          <i class="icon-arrow" :class="{ rotate: openMenus.customer }">▼</i>
        </div>
        <ul class="submenu" v-show="openMenus.customer">
          <li>
            <router-link
              to="/customer/list"
              :class="{ active: $route.path.includes('/customer/list') }"
            >
              客户列表
            </router-link>
          </li>
        </ul>
      </li>

      <!-- 供应商管理 -->
      <li class="menu-group">
        <div class="menu-group-title" @click="toggleMenu('provide')">
          <i class="icon-provide">🏢</i>
          <span>供应商管理</span>
          <i class="icon-arrow" :class="{ rotate: openMenus.provide }">▼</i>
        </div>
        <ul class="submenu" v-show="openMenus.provide">
          <li>
            <router-link
              to="/provide/list"
              :class="{ active: $route.path.includes('/provide/list') }"
            >
              供应商列表
            </router-link>
          </li>
        </ul>
      </li>

      <!-- 产品管理 -->
      <li class="menu-group">
        <div class="menu-group-title" @click="toggleMenu('product')">
          <i class="icon-product">📦</i>
          <span>产品管理</span>
          <i class="icon-arrow" :class="{ rotate: openMenus.product }">▼</i>
        </div>
        <ul class="submenu" v-show="openMenus.product">
          <li>
            <router-link
              to="/product/type-list"
              :class="{ active: $route.path.includes('/product/type-list') }"
            >
              产品类型管理
            </router-link>
          </li>
          <li>
            <router-link
              to="/product/list"
              :class="{ active: $route.path.includes('/product/list') }"
            >
              产品列表
            </router-link>
          </li>
        </ul>
      </li>

      <!-- 系统管理 -->
      <li class="menu-group">
        <div class="menu-group-title" @click="toggleMenu('system')">
          <i class="icon-system">⚙️</i>
          <span>系统管理</span>
          <i class="icon-arrow" :class="{ rotate: openMenus.system }">▼</i>
        </div>
        <ul class="submenu" v-show="openMenus.system">
          <li>
            <router-link
              to="/permission"
              :class="{ active: $route.path.includes('/permission') }"
            >
              权限管理
            </router-link>
          </li>
          <li>
            <router-link
              to="/permission/role"
              :class="{ active: $route.path.includes('/permission/role') }"
            >
              角色管理
            </router-link>
          </li>
          <li>
            <router-link
              to="/permission/user"
              :class="{ active: $route.path.includes('/permission/user') }"
            >
              用户管理
            </router-link>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 控制下拉菜单展开/收起
const openMenus = ref({
  workOrder: false,
  customer: false,
  provide: false,
  product: false,
  system: false
})

const toggleMenu = (menuKey) => {
  openMenus.value[menuKey] = !openMenus.value[menuKey]
}
</script>

<style scoped>
.sidebar {
  width: 220px;
  min-width: 220px;
  background-color: #2d3748;
  color: #e2e8f0;
  height: 100vh;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
}

.sidebar-logo {
  padding: 16px;
  background-color: #232931;
  border-bottom: 1px solid #4a5568;
  text-align: center;
}

.logo-text {
  font-size: 18px;
  font-weight: bold;
}

.sidebar-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-item,
.menu-group {
  margin: 0;
  padding: 0;
}

.menu-link,
.menu-group-title {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  cursor: pointer;
  transition: background-color 0.3s;
  text-decoration: none;
  color: inherit;
}

.menu-link:hover,
.menu-group-title:hover,
.menu-link.active {
  background-color: #4a5568;
  color: #ffffff;
}

.icon-home,
.icon-order,
.icon-customer,
.icon-provide,
.icon-product,
.icon-system {
  margin-right: 8px;
  font-size: 16px;
}

.icon-arrow {
  margin-left: auto;
  font-size: 12px;
  transition: transform 0.3s;
}

.rotate {
  transform: rotate(180deg);
}

.submenu {
  list-style: none;
  padding: 0;
  background-color: #374151;
  margin: 0;
}

.submenu li a {
  display: block;
  padding: 10px 40px;
  color: #e2e8f0;
  text-decoration: none;
  transition: background-color 0.3s;
  white-space: nowrap;
}

.submenu li a:hover,
.submenu li a.active {
  background-color: #4a5568;
  color: #ffffff;
}
</style>
